<template>
    <div class="common-box" v-if="boxIsShow">
        <div class="common-content-box">
            <div class="content-table-box">
                <div class="content_table_title_box">
                    <img src="@/assets/icon-data.png" class="content_table_title_icon">
                    <div class="content_table_title">产品管理</div>
                </div>
                <div class="table_search_box">
                    <el-form :inline="true" :model="searchForm" ref="searchForm" class="demo-form-inline">
                        <el-form-item label="产品名称" style="margin-bottom: 0;">
                            <el-input size="small " v-model="searchForm.spuName" placeholder="请输入产品名称"></el-input>
                        </el-form-item>
                        <el-form-item label="一级分类" style="margin-bottom: 0;">
                            <el-select v-model="searchForm.sort1Id" placeholder="请选择" size="small" @change="handleSelectChange" filterable>
                              <el-option 
                              v-for="item in firstSorts"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="二级分类" style="margin-bottom: 0;">
                            <el-select v-model="searchForm.sort2Id" placeholder="请选择" size="small" filterable>
                              <el-option 
                              v-for="item in secondSorts"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="产品状态" style="margin-bottom: 0;">
                            <el-select v-model="searchForm.publishStatus" placeholder="请选择" size="small">
                            <el-option label="上架" value="1"></el-option>
                            <el-option label="下架" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="租户" style="margin-bottom: 0;">
                            <el-select v-model="searchForm.supplierId" placeholder="请选择" size="small" filterable>
                            <el-option 
                            v-for="item in supplierList"
                            :key="item.supplierId"
                            :label="item.supplierName"
                            :value="item.supplierId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="排序方式" style="margin-bottom: 0;">
                            <el-select v-model="searchForm.level" placeholder="请选择" size="small">
                            <el-option label="降序" value="1"></el-option>
                            <el-option label="升序" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否DIY" style="margin-bottom: 0;">
                            <el-select v-model="searchForm.isDiy" placeholder="请选择" size="small">
                              <el-option label="是" value="1"></el-option>
                              <el-option label="否" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否每日精选" style="margin-bottom: 0;">
                            <el-select v-model="searchForm.isJingxuan" placeholder="请选择" size="small">
                              <el-option label="是" value="1"></el-option>
                              <el-option label="否" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否最新推荐" style="margin-bottom: 0;">
                          <el-select v-model="searchForm.isNew" placeholder="请选择" size="small">
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="0"></el-option>
                          </el-select>
                      </el-form-item>
                      <el-form-item label="是否现时秒杀" style="margin-bottom: 0;">
                        <el-select v-model="searchForm.isMiaosha" placeholder="请选择" size="small">
                          <el-option label="是" value="1"></el-option>
                          <el-option label="否" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                        <el-form-item label="是否热门推荐" style="margin-bottom: 0;">
                            <el-select v-model="searchForm.isPopular" placeholder="请选择" size="small">
                            <el-option label="是" value="1"></el-option>
                            <el-option label="否" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="margin-bottom: 0;">
                            <el-button type="primary"  @click="search()" size="small">查询</el-button>
                            <el-button @click="clearSearchForm()" size="small">清空</el-button>
                        </el-form-item>
                        <el-form-item style="margin-bottom: 0;">
                            <el-button type="primary" @click="editGoods('add',0)" size="small">新增产品</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="table_box">
                    <el-table
                        :data="tableData"
                        style="width: 100%;"
                        height="92%">
                        <el-table-column
                        fixed
                        prop="spuName"
                        label="产品名称"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="spuDesc"
                        label="产品描述"
                        width="240">
                        </el-table-column>
                        <el-table-column
                        prop="sort1Name"
                        label="一级分类"
                        width="140"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="sort2Name"
                        label="二级分类"
                        width="140"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="minNum"
                        label="最小下单量"
                        width="100"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="price"
                        label="显示价格"
                        width="100"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        prop="level"
                        label="排序"
                        width="100"
                        align="center">
                        </el-table-column>
                        <el-table-column
                        label="状态"
                        width="100"
                        align="center">
                        <template slot-scope="scope">
                          <span>{{ scope.row.publishStatus==0?'下架':'正常' }}</span>
                        </template>
                        </el-table-column>
                        <el-table-column
                        prop="supplierName"
                        label="租户"
                        width="120">
                        </el-table-column>
                        <el-table-column
                        label="是否DIY"
                        width="100"
                        align="center">
                        <template slot-scope="scope">
                          <span>{{ scope.row.isDiy==1?'是':'否' }}</span>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="每日精选"
                        width="100"
                        align="center">
                        <template slot-scope="scope">
                          <span>{{ scope.row.isJingxuan==1?'是':'否' }}</span>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="热门设置"
                        width="100"
                        align="center">
                        <template slot-scope="scope">
                          <span>{{ scope.row.isPopular==1?'是':'否' }}</span>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="最新推荐"
                        width="100"
                        align="center">
                        <template slot-scope="scope">
                          <span>{{ scope.row.isNew==1?'是':'否' }}</span>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="现时秒杀"
                        width="100"
                        align="center">
                        <template slot-scope="scope">
                          <span>{{ scope.row.isMiaosha==1?'是':'否' }}</span>
                        </template>
                        </el-table-column>
                        <el-table-column
                        prop="createTime"
                        label="创建时间"
                        width="240">
                        </el-table-column>
                        <el-table-column
                        prop="updateTime"
                        label="最新编辑时间"
                        width="240">
                        </el-table-column>
                        <el-table-column
                        fixed="right"
                        label="设置图片"
                        width="100"
                        align="center">
                        <template slot-scope="scope">
                            <el-button @click="toAddPic(scope.row.spuId)" type="text" size="middel">设置</el-button>
                        </template>
                        </el-table-column>
                        <el-table-column
                        fixed="right"
                        label="设置规格"
                        width="100"
                        align="center">
                        <template slot-scope="scope">
                            <el-button @click="toSet(scope.row.spuId)" type="text" size="middel">设置</el-button>
                        </template>
                        </el-table-column>
                        <el-table-column
                        fixed="right"
                        label="操作"
                        width="200">
                        <template slot-scope="scope">
                            <el-button @click="editGoods('edit',scope.row.spuId)" type="text" size="middel">编辑</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                    <pagination
                    :total="total"
                    :limit="pageSize"
                    :page="pageNumber"
                    :pageSize="pageSize"
                    @pageChange="pageChange"
                    ></pagination>
                </div>
            </div>
        </div>
        <!-- 产品编辑框 -->
        <add-goods
        ref="addGoods"
        @close="
           getData();
        "
        ></add-goods>
        <!-- 产品图片列表 -->
        <goods-pic
        ref="goodsPic"
        ></goods-pic>
        <!-- 产品规格列表 -->
        <goods-sku
          ref="goodsSku"
        ></goods-sku>
    </div>
</template>
<script>
import Pagination from "@/components/pagination.vue";
import addGoods from "@/components/addGoods.vue";
import goodsSku from "@/components/goodsSku.vue";
import goodsPic from "./goodsPic.vue";
export default {
    components: {
    Pagination,
    addGoods,
    goodsPic,
    goodsSku
  },
  data() {
    return {
        total: 0,
        pageSize: 30,
        pageNumber: 1,
        tableData: [],
        boxIsShow:false,
        searchForm:{
            spuName:'',
            sort1Id:'',
            sort2Id:'',
            publishStatus:'',
            supplierId:'',
            isDiy:'',
            isPopular:'',
            isNew:'',
            level:'1',
            isMiaosha:'',
            isJingxuan:''
        },
        supplierList:[],
        firstSorts:[],
        secondSorts:[]
    };
  },
  methods: {
    __init() {
      this.getData();
      this.getAllSuppliers();
      this.getFirstSorts();
    },
    getData(){
      var url="manager/getGoodsPage";
      var params={
        spuName:this.searchForm.spuName,
        sort2Id:this.searchForm.sort2Id,
        publishStatus:this.searchForm.publishStatus,
        supplierId:this.searchForm.supplierId,
        isDiy:this.searchForm.isDiy,
        isPopular:this.searchForm.isPopular,
        isNew:this.searchForm.isNew,
        level:this.searchForm.level,
        isMiaosha:this.searchForm.isMiaosha,
        isJingxuan:this.searchForm.isJingxuan,
        pageSize:this.pageSize,
        pageNum:this.pageNumber
      }
      this.$post(url, params).then((res) => {
        console.log(res)
        if (res.code === 0) {
          this.tableData=res.data.list;
          this.total=res.data.total;
        } else {
          this.$message.error(res.msg)
        }
      });
    },
    pageChange(e) {
      console.log(e)
      this.pageNumber = e.page;
      this.getData();
    },
    search(){
      this.pageNumber=1;
      this.getData();
    },
    clearSearchForm() {
      this.searchForm={
        spuName:'',
        sort1Id:'',
        sort2Id:'',
        publishStatus:'',
        supplierId:'',
        isDiy:'',
        isPopular:'',
        isNew:'',
        level:'0'
      }
      this.pageNumber=1;
      this.getData();
    },
    getAllSuppliers(){
      var url="manager/getAllSuppliers";
      var params={
        supplierName:''
      }
      this.$post(url, params).then((res) => {
        console.log(res)
        if (res.code === 0) {
          this.supplierList=res.data;
        } else {
          this.$message.error(res.msg)
        }
      });
    },
    getFirstSorts(){
      var url="manager/getAllSorts";
      var params={
        parentId:0
      }
      this.$post(url, params).then((res) => {
        console.log(res)
        if (res.code === 0) {
          this.firstSorts=res.data;
        } else {
          this.$message.error(res.msg)
        }
      });
    },
    handleSelectChange(id){
      this.getSecondSorts(id);
    },
    getSecondSorts(id){
      var url="manager/getAllSorts";
      var params={
        parentId:id
      }
      this.$post(url, params).then((res) => {
        console.log(res)
        if (res.code === 0) {
          this.secondSorts=res.data;
        } else {
          this.$message.error(res.msg)
        }
      });
    },
    editGoods(str,id){
      if(str=='add'){
        if (this.$refs.addGoods) {
            this.$refs.addGoods.tkIsShow = true;
            this.$refs.addGoods.title = "新增产品";
            this.$refs.addGoods.__init("add");
        }
      }else{
        if (this.$refs.addGoods) {
            this.$refs.addGoods.tkIsShow = true;
            this.$refs.addGoods.title = "编辑产品";
            this.$refs.addGoods.__init("edit",id);
        }
      }
    },
    toAddPic(id){
      if (this.$refs.goodsPic) {
            this.$refs.goodsPic.tkIsShow = true;
            this.$refs.goodsPic.title = "商品所需图片列表";
            this.$refs.goodsPic.__init(id);
        }
    },
    toSet(id){
      if (this.$refs.goodsSku) {
            this.$refs.goodsSku.tkIsShow = true;
            this.$refs.goodsSku.title = "商品规格列表";
            this.$refs.goodsSku.__init(id);
        }
    },
  }
}
</script>
<style scoped lang="scss">
  .common-box{
    background-color: #f9f9fb;
    height: 100%;
  }
  .common-content-box{
    height: 95%;
    margin-top: 2%;
    width: 96%;
    display: inline-block;
  }
  .content-table-box{
    background-color: #fff;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    box-shadow: 0 0 5px 1px rgba(83, 83, 83, 0.1);
  }
  .content_table_title_box{
    position: relative;
    height: 30px;
    margin-top: 10px;
    width: 100%;
    display: inline-block;
  }
  .content_table_title_icon{
    position: absolute;
    left: 15px;
    height: 18px;
    top: 6px;
  }
  .content_table_title{
    position: absolute;
    line-height: 34px;
    height: 100%;
    font-size: 15px;
    color: #42484e;
    left: 40px;
  }
  .table_search_box{
    text-align: left;
    margin-top: 10px;
    margin-left: 2%;
  }
  .table_box{
    height: calc(100% - 150px);
    margin-top: 10px;
    width: 96%;
    margin-left: 2%;
  }
  ::v-deep .el-select>.el-input{
    width: 100px;
  }
</style>